<template>
 <div class="home">
   <ul class="h_ul">
     <li>
       <div class="m_ks">
         <div class="m_tit">邀请码</div>
         <div class="code">
            <div class="img">
              <img src="#" alt="code">
            </div>
           <div>邀请码：80095</div>
           <div>
             邀请注册地址
             <el-input v-model="input" placeholder="请输入内容"></el-input>
             <el-button type="primary">复制</el-button>
           </div>
         </div>
       </div>
     </li>
     <li>
       <div class="m_ks">
         <div class="m_tit">公告  </div>
       </div>
     </li>
     <li>
       <div class="m_ks">
         <div class="m_tit">
           <span>最新商家邀请</span>
           <span class="d_link">更多</span>
         </div>
         <div class="d-el" v-for="item in tableData">
           <span>{{item.name}}</span>
           <span>{{item.address}}</span>
           <span>{{item.date}}</span>
         </div>
       </div>
     </li>
     <li>
       <div class="m_ks">
         <div class="m_tit">
           <span> 最新邀请会员</span>
           <span  class="d_link">更多</span>
         </div>
         <div class="d-el" v-for="item in tableData">
           <span>{{item.name}}</span>
           <span>{{item.date}}</span>
         </div>
       </div>
     </li>
   </ul>
 </div>

</template>

<script>
  export default {
    data() {
      const item = {
        date: '2016-05-02',
        name: 'Chen Ping',
        address: '桥西区祥云国际西区 七楼(1)单元 '
      };
      return {
          input:window.location.href,
          tableData: Array(10).fill(item)
      }
    },
    methods: {

    }
  }
</script>

<style scoped>

  .h_ul{
    width: 100%;
    display: flex;
    flex-flow: wrap;
     justify-content: space-around;

  }
  .h_ul li{
    width:49% ;
     box-shadow: 0 2px 4px rgba(0, 0, 0, .5), 0 0 6px rgba(0, 0, 0, .04);
     height:12.1212rem;
     margin-top: .5455rem;
     border-radius: 4px
  }
  .m_ks{
    padding:0 20px;
    text-align: left;
    font-size: 14px;
    }
  .m_tit{
    border-bottom: solid 1px #ccc;
    line-height: 1.2121rem;
     display: flex;
     justify-content: space-between;
  }
  .d_link{
    color: #3A8EE6;
  }
  .code{
    text-align: center;
    line-height: 1.2121rem;
  }
   .code .img{
     width: 4.8485rem;
     height: 4.8485rem;
     border: saddlebrown 1px solid;
     margin: 0 auto;
     margin-top: 1.2rem;
   }
   .code .img>img{
     width: 100%;
     height: 100%;
   }
   .el-input{
     width: 50%;
   }
   .d-el{
     width: 100%;
     display: flex;
     justify-content: space-between;
     line-height: 1.1rem;
   }
</style>
